<template>
  <div class="messages-container">
    <h2>我的消息</h2>
    
    <div v-if="messages.length === 0" class="empty-state">
      <el-empty description="暂无消息" />
    </div>
    
    <div v-else class="messages-list">
      <el-card
        v-for="message in messages"
        :key="message.id"
        class="message-item"
        :class="{ unread: !message.isRead }"
        @click="handleMessageClick(message)"
      >
        <div class="message-header">
          <h3 class="message-title">{{ message.title }}</h3>
          <div class="message-meta">
            <span class="time">{{ formatTime(message.createTime) }}</span>
            <el-tag v-if="!message.isRead" type="danger" size="small">未读</el-tag>
          </div>
        </div>
        
        <div class="message-content">
          <p>{{ message.content }}</p>
        </div>
        
        <div class="message-actions">
          <el-button
            size="small"
            type="danger"
            @click.stop="handleDeleteMessage(message)"
          >
            删除
          </el-button>
        </div>
      </el-card>
    </div>
    
    <div v-if="total > 0" class="pagination-wrapper">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'
import { useUserStore } from '@/stores/user'
import request from '@/utils/request'

const messages = ref<any[]>([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const userStore = useUserStore()

const formatTime = (time: string) => {
  return dayjs(time).format('MM-DD HH:mm')
}

const loadMessages = async () => {
  try {
    loading.value = true
    // const userName = userStore.user?.username
    // console.log(userName)

    const response = await request.get('/message/messageList', {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        userAccount: userStore.user?.username

      }
    })
    
    
    const dataArray = Array.isArray(response.data.data) ? response.data.data : []
    messages.value = dataArray
    console.log(messages.value)
    total.value = response.data.allRow || 0

  } catch (error: any) {
    ElMessage.error('获取消息列表失败')
  } finally {
    loading.value = false
  }
}

const handleMessageClick = async (message: any) => {
  try {
    // 这里需要调用标记消息为已读的API
    if (!message.isRead) {
      // message.isRead = true
      await request.post(`/message/MessageIsRead`,message)
      
    }
    loadMessages()
  } catch (error: any) {
    ElMessage.error('操作失败')
  }
}

const handleDeleteMessage = async (message: any) => {
  try {
    await request.delete(`/message/delete/${message.id}`)
    ElMessage.success('删除成功')
    loadMessages()
  } catch (error: any) {
    ElMessage.error('删除失败')
  }
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  loadMessages()
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  loadMessages()
}

onMounted(() => {
  loadMessages()
})
</script>

<style scoped lang="scss">
.messages-container {
  h2 {
    margin-bottom: 20px;
    color: $text-color;
  }
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.messages-list {
  .message-item {
    margin-bottom: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    &.unread {
      border-left: 4px solid $primary-color;
    }
  }
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.message-title {
  font-size: 16px;
  margin: 0;
  color: $text-color;
  flex: 1;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .time {
    font-size: 12px;
    color: $text-color-light;
  }
}

.message-content {
  margin-bottom: 12px;
  
  p {
    margin: 0;
    color: $text-color;
    line-height: 1.5;
  }
}

.message-actions {
  display: flex;
  justify-content: flex-end;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: center;
}
</style> 